<template>
    <div class="item">
        <div class="info">
            <img class="img" :src="src" alt="">
        </div>
        <div class="actions">
            <a-icon type="eye" @click="visible = true" theme="twoTone" twoToneColor="white" />
        </div>
        <a-modal v-model="visible" :footer="null">
            <img style="width: 100%;" :src="src" alt="">
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "preview-picture",

        props: {
            src: {
                type: [String],
                required: true
            },

            width: {
                type: [Number],
                required: false,
                default: 104
            }
        },

        data () {
            return {
                visible: false,
            };
        },

        methods: {

            handleCancel () {
                this.visible = false;
            },
        }
    }
</script>

<style scoped lang="less">
    .item{
        float: left;
        width: 104px;
        height: 104px;
        /*margin: 0 8px 8px 0;*/
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        position: relative;
        font-size: 14px;
        &:hover {
            .actions{
                opacity: 1;
            }
            .info {
                background-color: rgba(0, 0, 0, 0.65);
            }
        }

        .info {
            height: 100%;
            position: relative;
            overflow: hidden;
            padding: 0;
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
            background-color: rgba(0, 0, 0, 0);

            .img {
                width: 100%;
                height: 100%;
            }
        }
        .actions {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            z-index: 10;
            white-space: nowrap;
            opacity: 0;
            transition: all 0.3s;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.45);
        }
    }
</style>